<template>
<!-- 组件容器 -->
  <el-card class="box-card">
    <!-- 组件标题 -->
    <div slot="header" class="clearfix">
      <span>{{title}}</span>
    </div>
    <!-- 表单，绑定form数据 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="菜单名称">
        <el-input v-model="form.name" placeholder="必填"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径">
        <el-input v-model="form.href" placeholder="必填"></el-input>
      </el-form-item>
      <!-- 修改上级菜单 -->
      <el-form-item label="上级菜单">
        <!-- 下拉菜单 -->
        <el-select v-model="form.parentId" placeholder="必选">
          <!-- 用于添加顶层菜单 -->
          <el-option label="无上级菜单" :value="-1"></el-option>
          <!-- 遍历所有顶层菜单，绑定名称和id -->
          <el-option v-for="item in parentMenuList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="前端图标">
        <el-input v-model="form.icon"></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-radio-group v-model="form.shown">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.orderNum"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button v-if="title === '添加菜单'">重置</el-button>
      </el-form-item>
    </el-form>
</el-card>

</template>

<script>
// 引入请求接口方法
import { getEditMenuInfo, saveOrUpdate } from '@/services/menu'
export default {
  name: 'addMenu',
  props: ['title'],
  // 数据
  data () {
    return {
      // 表单数据
      form: {
        name: '',
        href: '',
        parentId: '',
        description: '',
        icon: '',
        shown: '',
        orderNum: ''
      },
      // 全部顶层菜单
      parentMenuList: []
    }
  },
  // 生命周期钩子函数
  created () {
    // 调用函数获取菜单数据
    this.getInfo()
  },
  methods: {
    // 点击提交后用于新增菜单
    async onSubmit () {
      // 获取数据
      const form = this.form
      // 校验数据，根据校验数据结果执行操作
      if (form.name !== '' && form.href !== '' && form.parentId !== '') {
        //  - 校验通过调用接口添加菜单
        const { data } = await saveOrUpdate(this.form)
        //  - - 判断是否添加成功，添加成功弹出提示并跳回菜单管管理
        if (data.code === '000000') {
          this.$message.success('菜单添加成功')
          this.$router.push('/menu')
        } else {
          // - - 添加失败弹出提示
          this.$message.error('添加失败')
        }
      } else {
        // - 校验失败弹出提示
        this.$message.error('您填写的信息有误，请重新输入')
      }
    },
    // 用于获取全部顶层菜单并获取编辑菜单信息
    async getInfo () {
      // 调用接口获取数据，并尝试获取id值
      const { data } = await getEditMenuInfo(this.$route.params.id)
      // 判断请求结果是否正确
      if (data.code === '000000') {
        // 将获取到的全部顶层菜单赋值data
        this.parentMenuList = data.data.parentMenuList
        // 判断是否获取的了当前编辑菜单的数据
        if (data.data.menuInfo !== null) {
          // 获得菜单数据将数据设置给form
          this.form = data.data.menuInfo
        }
      }
    }
  }
}
</script>

<style>

</style>
